<template>
	
	<view class="container p30 bgf">
		
		<view class="group" v-if="form.service_city_id">
			<view class="title f30 c3 bold">
				{{form.service_city_id.name}}  <text @click="edit = !edit"> 
					 <text class="iconfont icon-bianji  ml20" v-if="!edit"></text>
					 <text class="f26 c6 ml20" v-else>取消</text>
				</text>
			</view>
			<view class="t-flex wrap mt20">
				<view class="item" v-for="item,index in form.service_area_ids" :key="index">
				{{item.label}}
				<image src="../../../static/icons/29.png" mode="aspectFit" class="icon" @click="del(index)"
				v-if="edit"
				></image>
				
				</view>
				<view class="item active" @click="areas.show = true">
					<text class="iconfont icon-jia  f24"></text>
					添加区县
				</view>
			</view>
		</view>
		
		<view class="add t-flex center mainC" @click="$go('/pages/public/chooseCity')" v-if="!form.service_city_id">
			<text class="iconfont icon-jia mr10"></text>
			添加服务区域
		</view>
		
		
	</view>


	<view class="Allbottom t-flex center safeArea">
		<view class="btn t-flex center cf f30" @click="submit">
			保存
		</view>
	</view>
		
		
	<u-select v-model="areas.show" :list="areas.list" @confirm="areas.change"
	label-name="name"
	value-name="id"
	></u-select>
	
		
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onUnload } from "@dcloudio/uni-app"
import { cityDetail,editSfServiceQy,getAreaId, indexSfServiceQy } from '../../../api';
import { showToast } from '../../../lib/ts/util';
	
	onUnload(()=>{
		uni.$off('serverChooseCity')
	})
	uni.$on('serverChooseCity',(e)=>{
		findCity(e.name)
	})
	
	const getdata = async ()=>{
		let res = await indexSfServiceQy()
		if(res){
			let areaids = res.service_area_ids.split(',')
			let areaname = res.area_name.split(',')
			
			form.service_city_id = {
				id:+res.service_city_id,
				name:res.city_area_name
			}
			areaids.forEach((item,index)=>{
				form.service_area_ids.push({
					label:areaname[index],
					value:+item
				})
			})
			areas.init()
		}
	}
	getdata()
	
	let form = reactive({
		service_city_id:'',
		service_area_ids:[],
	})
	
	
	//获取服务器城市
	const findCity = async (name:string)=>{
		let res = await cityDetail(name+'市')
		if(res){
			 form.service_city_id = res
			 areas.init()
		}
	}
	
	let edit = ref(false)
	const del = (index)=>{
		form.service_area_ids.splice(index,1)
	}
	
	let areas =reactive({
		show:false,
		list:[],
		change(e){
			let target = form.service_area_ids.find(item=>item.value == e[0].value)
			if(!target) form.service_area_ids.push(e[0])
			else showToast(e[0].label+'已添加')
		},
		async init(){
			areas.list = await getAreaId(form.service_city_id.id)
		}
	})
	
	
	const submit = async ()=>{
		if(!form.service_city_id) return showToast('请选择服务城市')
		if(!form.service_area_ids.length) return showToast('请至少选择一个服务区县')
		
		let res = await editSfServiceQy({
			service_city_id:form.service_city_id.id,
			service_area_ids:form.service_area_ids.map(item=>item.value).join(',')
		})
		
		uni.$emit('checkWorkerInfo')
		uni.$back(res.msg)
		
	}
	
	

</script>

<style scoped lang="scss">
	.container{
		min-height: 100vh;
		padding-top: 100rpx;
	}
	.item{
		border: 2rpx solid #EEEEEE;
		color: #666;
		padding: 10rpx 30rpx;
		border-radius: 200rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		.icon{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			right: -10rpx;
			top: 0;
		}
	}
	.item.active{
		border-color: $main-color;
		color: $main-color;
	}
	
	.group{
		margin: 0 auto;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}
	
	.add{
		width: 600rpx;
		height: 70rpx;
		border-radius: 200rpx;
		border: 1px solid $main-color;
		margin: 0 auto;
	}
	
	
</style>
